<template>
	<view class="main">
		<swiperTabs itemStyle="margin: 20rpx 0">
			<template v-slot:nav>
				<view class="top">
					<view class="font-24">钱包余额(元)</view>
					<view class="flex flex-ai-c flex-jc-sb">
						<view class="font-72 color-1">{{parames.money}}</view>
						<view class="color-1 font-22 btn flex flex-ai-c flex-jc-c" @click="skip(`/pages/me/withdrawal`)">
							<i-icon icon="icon-withdraw" size="30rpx" style="margin-right: 10rpx;" />
							去提现
						</view>
					</view>
					<view class="color-2 font-20 pad-t-b-20" style="border-top: 2rpx solid #F1F1F1;margin-top: 58rpx;">受您同意或拒绝的影响 ｜ 到账时间会有延迟</view>
				</view>
			</template>
			<template v-slot:tabs style="height: 100%;">
				<view style="height: 100%;">
					<u-tabs-swiper name="name" barWidth="40" active-color="#333333" inactive-color="#666666" bg-color="none"
						ref="tabs1" :list="parames.tabs" :current="current" @change="tabsChange" :is-scroll="false"
						swiperWidth="750"></u-tabs-swiper>
					<swiper style="height: calc(100% - 84rpx);" :current="swiperCurrent" @transition="transition"
						@animationfinish="animationfinish" class="swiper">
						<slot name="swiperTbs'"></slot>
						<swiper-item :style="swiperItemStyle" class="swiper-item" v-for="(item, index) in parames.tabs" :key="index">
							<scroll-view scroll-y class="scroll" @scrolltolower="scrolltolower">
								<wallet-list :list="parames.list" :swiperCurrent="parames.swiperCurrent"></wallet-list>
								<u-loadmore v-if="parames.list.length" bg-color="none" :status="parames.loadStatus" @loadmore="scrolltolower"></u-loadmore>
							</scroll-view>
						</swiper-item>
					</swiper>
				</view>
			</template>s
		</swiperTabs>
	</view>
</template>

<script lang="ts" setup>
	import swiperTabs from '@/components/swiperTabs.vue'
	import walletList from './components/wallet_list.vue';
	import {
		reactive,ref,watch
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import user from '../../api/user'
	let tabs1 = ref()
	let current = ref(0)
	let swiperCurrent = ref(0)
	let parames = reactive({
		money: '0.00',
		list: [],
		tabs: [
			{
				name: '收入',
				value: 1
			}, {
				name: '支出',
				value: 0
			}
		],
		page: 1,
		loadStatus: ''
	})
	watch(() => swiperCurrent.value, (index) => {
		parames.list = []
		parames.page = 1
		withdrawalRecode()
	})
	const scrolltolower = () => {
		if(parames.loadStatus === 'nomore') return
		withdrawalRecode()
	}
	// tabs通知swiper切换
	const tabsChange = (index : number) => {
		swiperCurrent.value = index;
	}
	// swiper-item左右移动，通知tabs的滑块跟随移动
	const transition = (e) => {
		let dx = e.detail.dx;
		tabs1.value.setDx(dx);
	}
	const animationfinish = (e) => {
		let current2 = Number(e.detail.current)
		tabs1.value.setFinishCurrent(current2);
		swiperCurrent.value = current2;
		current.value = current2;
	}
	const skip = (url: string) => {
		uni.navigateTo({
			url: url
		})
	}
	const moreStatus = (status: string) => {
		parames.loadStatus = status
	}
	const withdrawalRecode = async () => {
		const res = await user.withdrawalRecode({
			type: parames.tabs[swiperCurrent.value].value,
			page: parames.page,
			size: 10
		})
		parames.list = [...parames.list,...res.data]
		if (res.data.length < 10) return moreStatus('nomore')
		if (res.data.total <= 10) {
			moreStatus('nomore')
		} else {
			moreStatus(res.data.length !== 0 ? 'loadmore' : 'nomore')
		}
		if (res.data.length === 0) return false
		parames.page += 1 // 当前页加1
	}
	const getMemberInfo = async () => {
		const res = await user.getMemberInfo()
		parames.money = res.data.money
	}
	onLoad(() => {
		getMemberInfo()
		withdrawalRecode()
	})
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.main{
		height: 100%;
		.btn{
			width: 180rpx;
			height: 60rpx;
			border-radius: 30rpx;
			border: 1rpx solid #999999;
			
		}
		.font-72{
			font-size: 72rpx;
		}
		.color-1{
			color: #000000;
		}
		.color-2{
			color: #999999;
		}
		.top{
			padding: 57rpx 25rpx 0 25rpx;
			background: #fff;
		}
	}
</style>